<template>
	<view>
		<!--基础信息-->
		<view class="cont-box pl24 pb24 pt24 pr24">
			<u--form :model="form" labelWidth="180upx" labelPosition="left">
				<view class="form-col">
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">公司名称</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.title"
									placeholder="请输入公司名称"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">税号</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.duty_number"
									placeholder="请输入税号"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">手机号</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.drawer_phone"
									placeholder="请输入手机号"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">验证码</view>
							<view style="width:280upx;" class="inp-content relative">
								<input style="text-align:left;" class="inp-cls" placeholder-class="inp-cls-place"
									v-model="form.yzm" ></input>
								<view class="code-text">
									<u-code ref="uCode2" @change="codeChange2" keep-running start-text="验证码"></u-code>
									<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
								</view>
							</view>
						</view>

					</view>
					<view class="row-box wbg last_row">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">邮箱</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.email"
									placeholder="请输入邮箱地址"></input>
							</view>
						</view>

					</view>
				</view>
				 
			</u--form>
		</view>
		<view class="add-box">
			<u-tabbar inactiveColor="#fff" :border="false">
				<u-tabbar-item @click="submitBtn" text="提交"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				form: {
					"title": "",
					"duty_number": "",
					"drawer_phone": "",
					"yzm": "",
					"email": ""
				},
				act_row: {},
				idx: [0],
				cont_name: "Sqkp",
				tips2: '',
				disabled3: false,
				param: {}
			}
		},
		mounted() {},
		onLoad(e) {
			this.param = e;
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if (this.form.drawer_phone == "") {
					this.$toast({
						title: "输入手机号"
					});
					return;
				}
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$api['get']('base/send-sms', {
						phone: this.form.drawer_phone
					}).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("code_key", res.data.key);
							uni.hideLoading();
							this.$refs.uCode2.start();
							uni.$u.toast('验证码已发送');
						} else {
							uni.$u.toast(res.message.message);
						}
					});




				} else {
					//uni.$u.toast('倒计时结束后再发送');
				}
			},
			getInfo() {
				var param = this.param;
				if (param.ids != undefined) {
					this.form.ids = param.ids;
				}
				if (param.id != undefined) {
					var id = param.id;
					this.$api["post"](this.cont_name + "/detail", {
						showLoding: 1,
						id: id
					}).then(res => {
						if (res.status == 200) {
							this.form = res.data;
						}
					});
				}

			},
			submitBtn() {
				var url = "invoice/save";
				this.form.key = uni.getStorageSync("code_key");
				//"duty_number": "",
				//"drawer_phone": "",
				//"yzm": "",
				//"email": ""
				if (this.form.title == "") {
					this.$toast({
						title: "输入公司名称"
					});
					return;
				}
				if (this.form.duty_number == "") {
					this.$toast({
						title: "输入税号"
					});
					return;
				}
				if (this.form.drawer_phone == "") {
					this.$toast({
						title: "输入手机号"
					});
					return;
				}
				if (this.form.yzm == "") {
					this.$toast({
						title: "输入验证码"
					});
					return;
				}
				if (this.form.email == "") {
					this.$toast({
						title: "输入邮箱"
					});
					return;
				}

				this.$api["post"](url, this.form).then(res => {

					if (res.code == 200) {
						if (this.form.id == undefined) {
							this.form = {};
						}
						this.$toast({
							title: "保存成功"
						})
						setTimeout(()=>{
							 this.$go("newmy/invoice/invoice")
						}, 1000);
					} else {
						this.$toast({
							title: res.message
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.line-box {
		background: #F6F6F6;
		height: 24upx;
	}

	.cont-box {
		overflow: hidden;
		border-radius: 16upx;
	}

	.form-box,
	.row-box {
		padding: 5upx 20upx;
	}

	.noneAddress {
		font-size: 28upx;
		font-weight: 400;
		color: #86837c;
		//color: #cdcdcd;
	}

	.tip-box {
		background: #fff;
		padding-left: 20upx;
		padding-top: 20upx;
		margin-bottom: 120upx;
	}

	.submitView {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.submitBtn {
		border-radius: 0;
	}

	.title {
		padding: 20upx;
		font-size: 36upx;
	}

	.row-content-box {

		/deep/.u-form-item__body__left,
		/deep/.u-form-item__body__right,
		/deep/.u-form-item__body {
			display: block !important;
			width: 100% !important;
		}

	}

	.onimg-text-area,
	.order_jetimg-text-area,
	.bodyimg-text-area {
		/deep/.u-form-item__body__left {
			padding-bottom: 30upx;
		}
	}

	.u-page__upload-item {
		width: 100%;
		overflow: hidden;

		.img-left-box,
		.img-right-box {
			width: 48%;
			float: left;
			text-align: center;
		}

		.img-mid-box {
			width: 48%;
			margin: 0 auto;
			text-align: center;
		}

		.img-right-box {
			float: right;
		}
	}

	/deep/ .u-upload__wrap {
		width: 100% !important;
		display: block !important;
	}

	.up-box {
		width: 100%;
		min-height: 260upx;
		/*  background: #EFEFEF;*/
		overflow: hidden;
		border-radius: 8upx;
		position: relative;
		color: #999999;

		.up-img {
			width: 100%;
			height: 260upx;
			border-radius: 8upx;
		}
	}

	.up-icon-box {
		text-align: center;
		width: 100%;
		margin-top: 30upx;

		/deep/ .u-icon--right {
			flex-direction: column !important;
		}
	}

	.order_jetimg-text-area {

		/deep/.u-form-item__body__right__content,
		/deep/.u-form-item__body__right__content__slot {
			display: block !important;
		}
	}

	.text-tip {
		text-align: center;
	}

	.text-bottom {
		position: absolute;
		bottom: 0;
		/* color: #fff;
       background: #04A0E2;*/
		width: 100%;
		text-align: center;
		padding: 15upx 0;
	}

	.remark-line {
		height: 20upx;
		background: #F8F8F8;
	}

	.order_jetimg-line {
		height: 80upx;
		width: 100%;
		background: #fff;
	}

	.popup-box {
		width: 90%;
		margin: 20upx auto;

	}

	.popup-title-box {
		text-align: center;
		padding: 30upx 20upx;
	}

	.cBlack {
		color: #afafaf
	}

	.demo-layout-box {
		overflow: hidden;
		width: 25%;
		float: left;
	}

	.lay-img {
		width: 100%;
		height: 160upx;
	}

	.inp-row {
		padding: 26upx 0;
		overflow: hidden;
		border-bottom: 2upx solid #f0f0f0;
		position: relative;

		.inp-title {
			width: 250upx;
			float: left;
			font-size: 32upx;
		}


		.inp-content {
			float: right;
			padding-right: 12upx;

			.inp-cls {
				text-align: right;
				font-size: 28upx;
			}

		}

		.icon-box {
			position: absolute;
			right: 11upx;
			top: 32upx;
			width: 11upx;
			height: 20upx;
		}
	}

	.my-fs {
		font-size: 23upx;
	}

	.my-fr {
		float: right !important;
		padding-right: 26upx;
	}

	.xz-box {
		text-align: right;
	}

	.last_row .inp-row {
		border-bottom: 0 !important;
	}

	.form-col {
		overflow: hidden;
		border-radius: 16upx;
	}

	.code-text {
		color: #0195FD;
		font-size: 28upx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10000;
	}
</style>